<template>
  <div class="search">
    <search-input v-model="query"></search-input>
    <div class="search-content">
      <div class="hotKeysAndHistory" v-show="!query">
        <div class="hotKey-wrapper">
          <h1 class="title">热门搜索</h1>
          <ul class="keys">
            <li v-for="k in hotKeys" :key="k.id" @click="clickHotKey(k)">
              <span>{{ k.key }}</span>
            </li>
          </ul>
        </div>
        <div v-show="history.length" class="search-history">
          <div class="title">
            <span class="title-text">搜索历史</span>
            <i class="iconfont purple-remove" @click="clearHistory"></i>
          </div>
          <ul>
            <li class="history-item" v-for="item in history" :key="item.id">
              <div class="name" @click="selectHistory(item)">
                {{ item.name }}
              </div>
              <i class="iconfont purple-close" @click="removeHistory(item)"></i>
            </li>
          </ul>
        </div>
      </div>
      <div v-show="query" class="suggest-wrapper">
        <Suggest :inputValue="query" @select-song="selectSong"></Suggest>
      </div>
    </div>
  </div>
</template>

<script>
import SearchInput from '@/components/SearchInput/SearchInput'
import Suggest from '@/components/Suggest/Suggest'
import { ref, watch, inject } from 'vue'
import useHotKey from './useHotKey'
import { useStore } from 'vuex'
import { getObjLocal, setObjLocal } from '@/assets/js/localStore'
export default {
  name: 'Search',
  components: {
    SearchInput,
    Suggest
  },
  setup() {
    const { dispatch } = useStore()
    const query = ref('')
    const hotKeys = ref([])
    const history = ref([])
    const confirm = inject('confirm')

    useHotKey(hotKeys)

    watch(
      query,
      newValue => {
        if (!newValue) {
          const list = getObjLocal('SEARCH_HISTORY')
          if (list && list.length) {
            history.value = list
          }
        }
      },
      {
        immediate: true
      }
    )

    function clickHotKey(key) {
      query.value = key.key
    }

    function selectSong(song) {
      const list = [song]
      dispatch('play/selectPlay', { list, index: 0 })
    }

    // 点击搜索历史
    function selectHistory(h) {
      query.value = h.name
    }

    // 删除搜索历史
    function removeHistory(song) {
      const index = history.value.findIndex(item => item.id === song.id)
      if (index > -1) {
        history.value.splice(index, 1)
        setObjLocal('SEARCH_HISTORY', history.value)
      }
    }

    // 清空搜索历史
    function clearHistory() {
      confirm('确认清空搜索历史', '确认', '取消')
        .then(() => {
          history.value = []
          setObjLocal('SEARCH_HISTORY', [])
        })
        .catch(() => {})
    }

    return {
      query,
      hotKeys,
      clickHotKey,
      selectSong,
      history,
      selectHistory,
      removeHistory,
      clearHistory
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  height: 100%;
  .search-content {
    height: calc(100% - 72px);
    padding: 0 20px 20px 20px;
    .hotKeysAndHistory {
      display: flex;
      flex-direction: column;
      height: 100%;
      .hotKey-wrapper {
        .title {
          font-size: 14px;
          margin-bottom: 20px;
        }
        .keys {
          display: flex;
          flex-wrap: wrap;
          > li {
            padding: 6px 12px;
            margin: 0 15px 10px 0;
            background-color: rgb(215, 215, 210);
            border-radius: 5px;
            color: #222;
            font-size: 12px;
          }
        }
      }
      .search-history {
        flex: 1;
        overflow: auto;
        > .title {
          display: flex;
          justify-content: space-between;
          padding: 10px 0;
          > .title-text {
            font-size: 14px;
          }
          > .purple-remove {
            font-size: 16px;
          }
        }
        .history-item {
          display: flex;
          justify-content: space-between;
          padding: 5px 0;
          font-size: 14px;
          > .name {
            @include no-wrap;
            flex: 1;
            padding-right: 30px;
            font-size: 12px;
          }
        }
      }
    }
    .suggest-wrapper {
      height: 100%;
    }
  }
}
</style>
